<template>
  <v-row class="d-flex justify-space-between">
    <v-col md="2" lg="2" xl="2" class="paginationSize">
      <v-subheader class="justify-space-between">每页:</v-subheader>
      <v-select
        v-model="size"
        :items="selectItems"
        label="条数"
        placeholder="请选择条数"
        hide-details
        single-line
        dense
        outlined
        small
        suffix="条"
      >
      </v-select>
    </v-col>
    <v-col class="d-flex justify-end align-center">
      <v-pagination v-model="current" :length="4" prev-icon="mdi-menu-left" next-icon="mdi-menu-right"></v-pagination>
    </v-col>
  </v-row>
</template>

<script>
export default {
  // PaginationComponent
  name: 'PaginationComponent',

  components: {},

  props: {},

  data() {
    return {
      current: 1,
      size: 20,
      selectItems: [10, 20, 40, 100]
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.paginationSize {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  .v-subheader {
    width: 50px;
    padding: 0;
  }
  .v-input {
    ::v-deep .v-input__control .v-input__slot {
      width: 100px !important;
    }
  }
}
</style>
